<template>
  <!-- 在线咨询 -->
  <div class="van-top">
    <van-nav-bar title="在线咨询" left-arrow @click-left="onClickLeft" />
  </div>

  <div id="chat">
    <div class="chatBox">
      <div class="chatBox-middle">
        <div ref="chatInfo" id="chatInfo">
          <div
            class="chatUser-box"
            v-for="(item, index) in infoList"
            :key="index"
            :class="[current === item.id ? 'chatUser-box1' : 'chatUser-box']"
          >
            <div class="chatUser-box-img">
              <van-image
                round
                width="2.5rem"
                height="2.5rem"
                :src="item.images"
              />
            </div>
            <div class="chatUser-info">
              <div
                class="chatUser-info-name"
                :class="[
                  current === item.id
                    ? 'chatUser-info-name1'
                    : 'chatUser-info-name',
                ]"
              >
                <span>{{ item.name }}</span>
              </div>
              <div
                class="chatUser-info-text"
                :class="[
                  current === item.id
                    ? 'chatUser-info-text1'
                    : 'chatUser-info-text',
                ]"
              >
                <span>{{ item.message }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="chatBox-infoDesk">
        <div class="chatBox-textarea">
          <van-field
            v-model="messages"
            rows="4"
            type="textarea"
            placeholder="请输入咨询信息"
          />
        </div>
        <div class="chatBox-sendOut">
          <van-button
            class="sendOut"
            size="small"
            type="primary"
            @click="getSends"
            >客服</van-button
          >
          <van-button
            class="sendOut"
            size="small"
            type="primary"
            @click="getSend"
            >用户</van-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant'

var infoData = [
  {
    id: 1,
    name: '客服',
    images: 'https://img01.yzcdn.cn/vant/leaf.jpg',
    message: '您好！',
  },
  {
    id: 2,
    name: 'Daisy',
    images: 'https://img01.yzcdn.cn/vant/cat.jpeg',
    message: '咨询信息',
  },
]

export default {
  name: 'consult',
  data() {
    return {
      messages: '',
      current: 2,
      infoList: infoData,
    }
  },
  mounted() {
    this.scrollToBottom()
  },
  updated() {
    this.scrollToBottom()
  },
  methods: {
    onClickLeft() {
      this.$router.push('/user')
    },
    getSend() {
      if (this.messages === '') {
        Toast('请输入咨询信息')
        return
      }
      let userData = {
        id: 2,
        name: 'Daisy',
        images: 'https://img01.yzcdn.cn/vant/cat.jpeg',
        message: this.messages,
      }
      infoData.push(userData)
      this.messages = ''
    },
    getSends() {
      if (this.messages === '') {
        Toast('请输入回复信息')
        return
      }
      let customerData = {
        id: 4,
        name: '客服',
        images: 'https://img01.yzcdn.cn/vant/leaf.jpg',
        message: this.messages,
      }
      infoData.push(customerData)
      this.messages = ''
    },
    scrollToBottom() {
      this.$nextTick(() => {
        let container = this.$refs.chatInfo
        container.scrollTop = container.scrollHeight
      })
    },
  },
}
</script>

<style scoped>
.consult {
  background: #f2f2f2;
}
.van-top /deep/ .van-nav-bar__title {
  font-size: 18px;
  font-weight: bold;
}
.van-top /deep/ .van-nav-bar .van-icon {
  color: black !important;
}

html,
body {
  background-color: #e8e8e8;
}

#chat .chatBox {
  width: 18rem;
  height: auto;
  margin: 0.5rem auto 0;
  background-color: #fff;
  overflow: hidden;
  border-radius: 0.625rem;
}

#chat .chatBox-top-text {
  margin-left: 1.25rem;
  font-size: 1rem;
  color: #fff;
}

#chat .chatBox-middle {
  width: 100%;
  height: 30rem;
  background-color: #fff;
  border-bottom: 0.0625rem solid #ccc;
}

#chat .chatBox-middle {
  width: 100%;
  height: 24rem;
  background-color: #fff;
}

#chat .chatBox-infoDesk {
  width: 100%;
  height: 6rem;
}

#chat .chatBox-textarea {
  width: 100%;
  height: 2.5rem;
}

#chat .chatBox-sendOut {
  margin-top: 0.625rem;
  width: 100%;
  height: 3.125rem;
  text-align: right;
}

#chat .sendOut {
  padding: 0 1.25rem;
  height: 2.1875rem;
  margin: 0.3125rem 1.25rem 0 0;
}

#chatInfo {
  width: 94%;
  height: 94%;
  margin: 1.25rem auto;
  overflow: auto;
}

#chat .chatUser-box {
  width: 100%;
  margin-bottom: 6px;
  display: flex;
  flex-direction: row;
}

#chat .chatUser-box-img {
  display: flex;
}

#chat .chatUser-info {
  margin: 0 1.25rem;
}

#chat .chatUser-info-name {
  font-size: 0.875rem;
  color: #888;
  display: flex;
  flex-direction: row;
}

#chat .nowDate {
  margin: 0 0.625rem;
}

#chat .chatUser-info-text {
  margin-top: 0.3125rem;
  max-width: 20rem;
  padding: 0.5rem;
  background-color: #e8e8e8;
  border-radius: 0.5rem;
  float: left;
  table-layout: fixed;
  word-break: break-all;
  overflow: hidden;
}

#chat .chatUser-info-text span {
  font-size: 0.9375rem;
  line-height: 1.5625rem;
}
#chat .chatUser-box1 {
  flex-direction: row-reverse;
}
#chat .chatUser-info-name1 {
  flex-direction: row-reverse;
}
#chat .chatUser-info-text1 {
  float: right;
}
</style>
